<!DOCTYPE html>
<html>
<head>
	<title>chat</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/jquery.Jcrop.min.js"></script>
	<script type="text/javascript" src="./js/socket.io.js"></script>
	<style>
		.chatslist{
			width:100%;
			height:400px;
			margin:20px 0;
			background:#fff;
			overflow-y: scroll;
		}
		.chatrecoreds{
			height:auto;
			overflow-y:auto;
		}
		dl{
			padding:10px;
		}
		dt span{
			float:left;
		}
		.imgHead{
			display:inline-block;
			width:50px;
			height:50px;
			border-radius:50px;
			background:url(./imgs/meng.jpg) no-repeat center;
			background-size:cover;
			margin-right:10px;
		}
		.box{
			position:relative;
			height:auto;
			border-radius:4px;
			margin-left:15px;
		}
		.leftchat .rightj{
			display:none;
		}
		.leftj{
			position:absolute;
			top:7px;
			left:-15px;
			display:inline-block;
			width:0;
			height:0;
			border:8px solid;
			border-color:transparent #f8f8f8 transparent transparent
		}
		.chatsjilu{
			word-break: break-all;
			max-width: 150px;
			display:inline-block;
			border-radius:4px;
			background: #f8f8f8;
			margin:0;
			padding:5px 10px;
		}
		.userName{
			margin-top:12px;
		}
		.clearfloat:after{
			display: block;
			clear:both;
			content:"";
			visibility: hidden;
			height: 0;
		}
		.rightchat span{
			float:right;
		}
		.rightchat .leftj{
			left:62px;
			border-color:transparent transparent transparent #a7f275
		}
		.rightchat .box{
			margin-right:15px;
		}
		.rightchat .chatsjilu{
			background:#a7f275;
		}
		.rightchat .leftj{
			display:none;
		}
		.rightchat .rightj{
			position:absolute;
			top:7px;
			right:-15px;
			display:inline-block;
			width:0;
			height:0;
			border:8px solid;
			border-color:transparent transparent transparent #a7f275
		}
	</style>
</head>
<body>
	<!-- header -->
	<%- include('./header.ejs',{"where":"chat"})%>
	<div class="container">
		<div class="chatbox jumbotron">
			<div class="chatslist">
				<!--聊天记录-->
				<div class="chatrecoreds">
<!-- 					<dl class="leftchat" style="display:none">
						<dt class="clearfloat">
							<span class="imgHead"></span>
							<span class="userName">
								<div class="box">
									<span class="leftj"></span>
									<span class="chatsjilu">你哈斯的哈就睡大街和大家说的</span>
									<span class="rightj"></span>
								</div>
							</span>
						</dt>
					</dl> -->
				</div>
			</div>
			<div class="row">
			  	<div class="col-lg-12">
			    	<div class="input-group">
			      		<input type="text" class="form-control txt" placeholder="Search for..." style="height:36px">
			      		<span class="input-group-btn">
			        		<button class="btn btn-default textinn" type="button">Enter</button>
			      		</span>
			    	</div><!-- /input-group -->
			  	</div><!-- /.col-lg-6 -->
			</div><!-- /.row -->
		</div>
	</div>
	<script type="text/javascript" src="./js/chat.js"></script>
</body>
</html>